<template>
    <div class="start-wrap">
      <scrollList ref="btylist" :loadMore="false" :bounce="false" v-if="allInfo">
        <div slot="defaultScroll">
          <div class="bty-wrap car-basic">
            <i class="corner left-corner"></i>
            <i class="corner right-corner"></i>
            <div class="car-logo">
              <img class="car-logo" :src="allInfo.carImage ? allInfo.carImage : i8car" />
            </div>
            <div class="desc">
              <p>{{allInfo.plateNo}}</p>
              <p>{{allInfo.carBandName}}</p>
            </div>
            <div class="circle-btn" @click.prevent.stop="goBack">
              <div class="circle-wrap">
                <img :src="playicon" />
              </div>
            </div>
          </div>
          <div class="bty-wrap car-panel" v-for="(item, index) in checkReport" :key="`panel_${index}`">
            <i class="corner left-corner"></i>
            <i class="corner right-corner"></i>
            <header>
              <h2>{{item.title}}</h2>
            </header>
            <section v-if="item.type === `basic`">
              <div class="st-basic-column" v-for="(child, index) in item.data" :key="`basic${index}`">
                <h3 :class="`${child.font}`">{{child.value}}</h3>
                <p><i class="bty-icon" :style="`background:url(${icons[child.icon.split('-')[2]]}) no-repeat; background-size: auto 100%; background-position: center;`"></i><span>{{child.label}}</span></p>
              </div>
            </section>
            <section v-if="item.type === `pfm`">
              <div class="st-pfm-column" v-for="(child, index) in item.data" :key="`pfm${index}`">
                <div class="colum-wrap">
                  <p><i class="bty-icon" :style="`background:url(${icons[child.icon.split('-')[2]]}) no-repeat; background-size: auto 100%; background-position: center;`"></i></p>
                  <p><span>{{child.label}}</span></p>
                  <h3 :class="`${child.font}`">{{child.value}}{{child.unit}}</h3>
                </div>
              </div>
            </section>
            <section v-if="item.type === `malfunction`">
              <div :class="`st-malf-column ${(index + 1) % 3 === 0 ? 'clear-mr' : ''}`" v-for="(child, index) in item.data" :key="`${index}`">
                <div class="colum-wrap">
                  <div class="abs-icon"><i class="bty-icon" :style="`background:url(${icons[child.icon.split('-')[2]]}) no-repeat; background-size: auto 100%; background-position: center;`"></i></div>
                  <p class="desc">{{child.label}}</p>
                  <h3 :class="`${child.font}`">{{child.value}}{{child.unit}}</h3>
                </div>
              </div>
            </section>
            <section v-if="item.type === `btyinfo`">
              <div class="st-info-column">
                <div class="st-title st-start-title">
                  <h2>{{item.data[0].title}}</h2>
                  <p>{{item.data[0].enTitle}}</p>
                </div>
              </div>
              <div :class="`st-info-column`" v-for="(child, index) in item.data[0].data" :key="`startInfo${index}`">
                <div class="colum-wrap">
                  <p class="desc">{{child.label}}</p>
                  <h3 :class="`${child.font}`" :style="`color: ${item.data[0].color}`">
                    <span>{{child.value.split(',')[0]}}{{child.unit[0]}}</span>
                    <span>{{child.value.split(',')[1]}}{{child.unit[1]}}</span>
                  </h3>
                </div>
              </div>
              <div class="st-info-column">
                <div class="st-title st-end-title">
                  <h2>{{item.data[1].title}}</h2>
                  <p>{{item.data[1].enTitle}}</p>
                </div>
              </div>
              <div :class="`st-info-column`" v-for="(child, index) in item.data[1].data" :key="`endInfo${index}`">
                <div class="colum-wrap">
                  <p class="desc">{{child.label}}</p>
                  <h3 :class="`${child.font}`" :style="`color: ${item.data[1].color}`">
                    <span>{{child.value.split(',')[0]}}{{child.unit[0]}}</span>
                    <span>{{child.value.split(',')[1]}}{{child.unit[1]}}</span>
                  </h3>
                </div>
              </div>
              <div :class="`st-info-column`" v-for="(child, index) in item.data[2].data" :key="`square${index}`">
                <div class="square-wrap">
                  <p class="desc">{{child.label}}</p>
                  <h3 :class="`${child.font}`" :style="`color: ${item.data[1].color}`">{{child.value}}{{child.unit}}</h3>
                </div>
              </div>
            </section>
            <section v-if="item.type === 'btytip'">
              <div class="st-tip-column">
                <div class="tip-item" v-for="(child, index) in item.data" :key="`tip_${index}`">
                  <div class="tip-label" :style="`color: ${index % 2 ? '#fff' : '#59f4ec'}`">{{child.label}}</div>
                  <div class="tip-val xt-font">{{child.value}}{{child.unit}}</div>
                </div>
                <div class="tip-desc">
                  <p>订单编号:  {{allInfo.appOrderId}}</p>
                  <p>检测时间:  {{allInfo.testDate}}</p>
                </div>
              </div>
            </section>
          </div>
        </div>
      </scrollList>
      <empty v-else></empty>
    </div>
</template>

<script type="text/ecmascript-6">
  import scrollList from '@/components/scroll/list';
  import i8car from '@/assets/img/i8car.png';
  import playicon from '@/assets/img/bty_play.png';
  import icons from './exportImage';
  import empty from '@/components/other/empty';
  import FunctionTool from '@/utils/functionTools';
  export default {
    name: 'battery-start',
    data () {
      return {
        i8car,
        playicon,
        allInfo: null,
        btyInfo: null,
        icons: icons,
        checkReport: []
      };
    },
    mounted () {
      this.NOW_TIME = FunctionTool.formatTimeStr(new Date());
      this.userId = window.sessionStorage.getItem('userId');
      if (window.sessionStorage.getItem('btyInfo')) {
        this.allInfo = JSON.parse(window.sessionStorage.getItem('btyInfo')) || {};
        this.allInfo.testDate = `${this.allInfo.testDate.substr(0, 4)}-${this.allInfo.testDate.substr(4, 2)}-${this.allInfo.testDate.substr(6, 2)}`;
        try {
          this.btyInfo = JSON.parse(this.allInfo.batteryInfo);
        } catch (e) {
          alert('数据格式错误');
        }
      }
      this.checkReport = [
        {
          title: '电池基本参数',
          type: 'basic',
          data: [
            {
              label: '电池材料',
              icon: 'bty-icon-battery',
              value: this.transferStr(this.btyInfo.BATTERYINFO.MATERIAL)
            },
            {
              label: '续航里程（km）',
              icon: 'bty-icon-match',
              value: this.transferStr(this.btyInfo.BATTERYINFO.EMILEAGE),
              font: 'xt-font'
            },
            {
              label: '冷却方式',
              icon: 'bty-icon-water',
              value: this.transferStr(this.btyInfo.BATTERYINFO.COOLMODE)
            },
            {
              label: '系统标称电压（V）',
              icon: 'bty-icon-votage',
              value: this.transferStr(this.btyInfo.BATTERYINFO.NV),
              font: 'xt-font'
            },
            {
              label: '系统标称能量',
              icon: 'bty-icon-energy',
              value: this.transferStr(this.btyInfo.BATTERYINFO.NC)
            },
            {
              label: '系统连接方式',
              icon: 'bty-icon-connect',
              value: this.transferStr(this.btyInfo.BATTERYINFO.CONNMODE)
            }
          ]
        },
        {
          title: '电池性能评估',
          type: 'pfm',
          data: [
            {
              label: '电池剩余容量',
              icon: 'bty-icon-spbattery',
              value: this.transferStr(this.btyInfo.BATTERYPER.SOCAV),
              font: 'xt-font'
            },
            {
              label: 'SOH',
              icon: 'bty-icon-soh',
              value: this.transferStr(this.btyInfo.BATTERYPER.SOH),
              font: 'xt-font',
              unit: '%'
            },
            {
              label: '能量衰减率',
              icon: 'bty-icon-minenergy',
              value: this.transferStr(this.btyInfo.BATTERYPER.EDR),
              font: 'xt-font',
              unit: '%'
            },
            {
              label: '理论循环次数',
              icon: 'bty-icon-repeat',
              value: this.transferStr(this.btyInfo.BATTERYPER.COUNT),
              font: 'xt-font'
            }
          ]
        },
        {
          title: '电池故障排查',
          type: 'malfunction',
          data: [
            {
              label: '绝缘故障',
              icon: 'bty-icon-jymal',
              value: this.transferStr(this.btyInfo.BATTERYE.INE)
            },
            {
              label: 'BMS元件故障',
              icon: 'bty-icon-bmsmal',
              value: this.transferStr(this.btyInfo.BATTERYE.BMSE)
            },
            {
              label: '输出连接器过温故障',
              icon: 'bty-icon-connectmal',
              value: this.transferStr(this.btyInfo.BATTERYE.TEMPE)
            },
            {
              label: '充电连接器故障',
              icon: 'bty-icon-chargemal',
              value: this.transferStr(this.btyInfo.BATTERYE.CONNE)
            },
            {
              label: '电池组温度过高故障',
              icon: 'bty-icon-tphighmal',
              value: this.transferStr(this.btyInfo.BATTERYE.BTEMPE)
            },
            {
              label: '高压继电器故障',
              icon: 'bty-icon-relaymal',
              value: this.transferStr(this.btyInfo.BATTERYE.HVRE)
            }
          ]
        },
        {
          title: '电池品质评估',
          type: 'btyinfo',
          data: [
            {
              title: '初始数据',
              enTitle: 'The initial data',
              color: '#59f4ec',
              data: [
                {
                  label: '初始SOC、电流',
                  value: this.transferStr(this.btyInfo.BATTERYQUALITY.SSOCC),
                  font: 'xt-font',
                  unit: ['%', 'A']
                },
                {
                  label: '初始最高单体电压、编号',
                  value: this.transferStr(this.btyInfo.BATTERYQUALITY.SMAXVNO),
                  font: 'xt-font',
                  unit: ['V', '']
                },
                {
                  label: '初始最高电池温度、编号',
                  value: this.transferStr(this.btyInfo.BATTERYQUALITY.SMAXTNO),
                  font: 'xt-font',
                  unit: ['℃', '']
                },
                {
                  label: '初始最低电池温度、编号',
                  value: this.transferStr(this.btyInfo.BATTERYQUALITY.SMINTNO),
                  font: 'xt-font',
                  unit: ['℃', '']
                },
                {
                  label: '初始均值压差',
                  value: this.transferStr(this.btyInfo.BATTERYQUALITY.SAVEVDIF),
                  font: 'xt-font',
                  unit: ['V', '']
                }
              ]
            },
            {
              title: '结束数据',
              enTitle: 'The end data',
              color: '#00a0e9',
              data: [
                {
                  label: '结束SOC、电流',
                  value: this.transferStr(this.btyInfo.BATTERYQUALITY.ESOCC),
                  font: 'xt-font',
                  unit: ['%', 'A']
                },
                {
                  label: '结束最高单体电压、编号',
                  value: this.transferStr(this.btyInfo.BATTERYQUALITY.EMAXVNO),
                  font: 'xt-font',
                  unit: ['V', '']
                },
                {
                  label: '结束最高电池温度、编号',
                  value: this.transferStr(this.btyInfo.BATTERYQUALITY.EMAXTNO),
                  font: 'xt-font',
                  unit: ['℃', '']
                },
                {
                  label: '结束最低电池温度、编号',
                  value: this.transferStr(this.btyInfo.BATTERYQUALITY.EMINTNO),
                  font: 'xt-font',
                  unit: ['℃', '']
                },
                {
                  label: '结束均值压差',
                  value: this.transferStr(this.btyInfo.BATTERYQUALITY.EAVEVDIF),
                  font: 'xt-font',
                  unit: ['V', '']
                }
              ]
            },
            {
              type: 'squarelist',
              data: [
                {
                  label: '电池单体最高电压',
                  value: this.transferStr(this.btyInfo.BATTERYQUALITY.MAXV),
                  font: 'xt-font',
                  unit: 'V'
                },
                {
                  label: '电池单体最低电压',
                  value: this.transferStr(this.btyInfo.BATTERYQUALITY.MINV),
                  font: 'xt-font',
                  unit: 'V'
                },
                {
                  label: '最大压差',
                  value: this.transferStr(this.btyInfo.BATTERYQUALITY.MAXVDIF),
                  font: 'xt-font',
                  unit: 'V'
                },
                {
                  label: '起始电压变化',
                  value: this.transferStr(this.btyInfo.BATTERYQUALITY.SEVC),
                  font: 'xt-font',
                  unit: 'V'
                }
              ]
            }
          ]
        },
        {
          title: '特别提示',
          type: 'btytip',
          data: [
            {
              label: '单体电池最高允许充电电压',
              value: this.transferStr(this.btyInfo.HOTTIP.DMCV),
              unit: 'V',
              font: 'xt-font'
            },
            {
              label: '最高允许充电总电压',
              value: this.transferStr(this.btyInfo.HOTTIP.MCV),
              unit: 'V',
              font: 'xt-font'
            },
            {
              label: '最高允许充电电流',
              value: this.transferStr(this.btyInfo.HOTTIP.MCC),
              font: 'xt-font',
              unit: 'A'
            },
            {
              label: '最高允许温度',
              value: this.transferStr(this.btyInfo.HOTTIP.MT),
              font: 'xt-font',
              unit: '℃'
            }
          ]
        }
      ];
      this.$nextTick(() => {
        this.$refs.btylist && this.$refs.btylist._initComponent();
      });
    },
    methods: {
      transferStr (str) {
        const s = str;
        return s ? str : '--';
      },
      goBack () {
        this.$router.replace({
          path: 'btyform',
          query: {
            accountId: this.userId,
            retest: 1
          }
        });
      }
    },
    components: {
      scrollList,
      empty
    }
  }
</script>

<style rel="stylesheet/stylus" lang="stylus">
@import '~@/assets/css/mixin.styl';
.start-wrap
  position relative
  height 100%
  background-color #040e29
  .scrollwrap
    padding rpx(20) rpx(30)
    &>div
      padding-bottom rpx(80)
    .bty-wrap
      position relative
      width 100%
      border 2px solid #148ab6
      background url("https://app-ccchong-com.oss-cn-qingdao.aliyuncs.com/img_bg_ta%402x.png") repeat
      box-shadow 0 0 8px rgba(255, 255, 255, 0.5) inset
      .corner
        display block
        position absolute
        width rpx(40)
        height rpx(40)
        border 4px solid #02a0ec
        z-index 99
        &.left-corner
          top -4px
          left -4px
          border-right none
          border-bottom none
        &.right-corner
          bottom -4px
          right -4px
          border-left none
          border-top none
    .car-basic
      display flex
      padding rpx(40) rpx(40) rpx(40) 0
      .car-logo
        width rpx(350)
        flex 0 0 rpx(350)
        text-align center
        font-size 0
        & img
          width rpx(290)
      .desc
        flex 1
        padding-top rpx(20)
        font-size rpx(28)
        line-height rpx(44)
        color #57f0e8
      .circle-btn
        width rpx(110)
        flex 0 0 rpx(110)
        height rpx(110)
        border-radius 50%
        overflow hidden
        background-color #111b36
        display flex
        justify-content center
        align-items center
        .circle-wrap
          display flex
          justify-content center
          align-items center
          width rpx(90)
          height rpx(90)
          border-radius 50%
          background-color #1d2740
          overflow hidden
          & img
            position relative
            display block
            width rpx(70)
            left rpx(4)
            bottom rpx(1)
    .car-panel
      margin-top rpx(36)
      & header
        width 100%
        height rpx(120)
        padding-bottom rpx(20)
        & h2
          position relative
          width rpx(468)
          height 100%
          line-height rpx(104)
          text-align center
          margin 0 auto
          background url("../../assets/img/bty_title.png") no-repeat center
          background-size 100% 100%
          color #fff
          font-size rpx(32)
          font-weight 500
          &:before
            content: ''
            position absolute
            display block
            width rpx(40)
            height rpx(22)
            background url("../../assets/img/bty_arrow_l.png") no-repeat
            background-size 100% 100%
            left rpx(10)
            top 50%
            margin-top rpx(-11)
          &:after
            content: ''
            position absolute
            display block
            width rpx(40)
            height rpx(22)
            background url("../../assets/img/bty_arrow_r.png") no-repeat
            background-size 100% 100%
            right rpx(10)
            top 50%
            margin-top rpx(-11)
      & section
        width 100%
        display flex
        flex-wrap wrap
        padding rpx(30)
        font-size rpx(28)
        color #fff
        .st-basic-column
          width rpx(310)
          padding-left rpx(20)
          padding-top rpx(10)
          padding-bottom rpx(30)
          & h3
            font-size rpx(32)
            font-weight 500
            color #59f4ec
            line-height rpx(60)
            &.xt-font
              font-family "lato"
          & p
            color #fff
            line-height rpx(54)
            & i
              display inline-block
              vertical-align middle
              width rpx(30)
              height rpx(30)
            & span
              margin-left rpx(10)
        .st-pfm-column
          width rpx(310)
          text-align center
          & h3
            font-size rpx(32)
            font-weight 500
            color #59f4ec
            line-height rpx(70)
            padding-bottom rpx(10)
          & p
            color #fff
            & i
              display inline-block
              vertical-align middle
              width rpx(96)
              height rpx(96)
            & span
              display inline-block
              padding-top rpx(24)
              margin-left rpx(10)
        .st-malf-column
          width rpx(186)
          margin-right rpx(32)
          &.clear-mr
            margin-right 0
          .colum-wrap
            text-align center
            height rpx(186)
            border-1px-all(#2f828c, 2px, solid)
            margin-top rpx(60)
            background-color #040f2b
            .abs-icon
              position absolute
              width rpx(100)
              height rpx(88)
              z-index 99
              top rpx(-44)
              left 50%
              margin-left rpx(-50)
              display flex
              justify-content center
              align-items center
              background url("../../assets/img/mal-bg.png") no-repeat
              background-size 100% 100%
              .bty-icon
                display inline-block
                width rpx(40)
                height rpx(36)
            .desc
              font-size rpx(18)
              height rpx(64)
              width 72%
              margin 0 auto
              box-sizing content-box
              line-height rpx(30)
              padding-top rpx(60)
              color #fff
            & h3
              font-size rpx(30)
              font-weight 500
              color #59f4ec

        .st-info-column
          width rpx(310)
          .colum-wrap
            text-align center
            & p
              font-size rpx(24)
              line-height rpx(60)
            & h3
              font-size rpx(30)
              line-height rpx(40)
              font-weight 500
              padding-bottom rpx(40)
              & span:first-child
                margin-right rpx(10)
          .square-wrap
            text-align center
            border-1px-all(#033259, 2px, solid, 2px)
            width rpx(280)
            margin-left rpx(15)
            min-height rpx(116)
            padding-top rpx(10)
            margin-bottom rpx(28)
            & p
              font-size rpx(24)
              line-height rpx(54)
            & h3
              font-size rpx(30)
              font-weight 500
          .st-title
            width rpx(256)
            height rpx(100)
            margin-top rpx(6)
            padding-left rpx(20)
            padding-top rpx(16)
            & h2
              font-size rpx(30)
              line-height rpx(40)
              font-weight 500
            & p
              font-size rpx(24)
          .st-start-title
            background url("../../assets/img/bty_start_bg.png") no-repeat
            background-size 100% 100%
            color #59f4ec
          .st-end-title
            background url("../../assets/img/bty_end_bg.png") no-repeat
            background-size 100% 100%
            color #00a0e9
        .st-tip-column
          width rpx(532)
          margin 0 auto
          .tip-item
            display flex
            padding rpx(1) rpx(28)
            justify-content space-between
            background-color rgba(14, 27, 54, 1)
            height rpx(74)
            line-height rpx(74)
            margin-top rpx(18)
            .tip-val
              color #00a0e9
              font-size rpx(34)
              font-weight bolder
          .tip-desc
            font-size rpx(16)
            color #feffff
            text-align center
            padding-top rpx(40)
            padding-bottom rpx(20)
            & p
              line-height rpx(40)
.xt-font
  font-style italic
  font-weight bolder
</style>
